<template>
	<view>
		<view style="margin: 20rpx;">
			<image :src="invite_img" mode="widthFix" style="width: 100%;border-radius: 20rpx;"></image>
		</view>
		<view style="position: absolute;top:200rpx;width: 100%;opacity: 0;">
			<button open-type="share" type="default">立即邀请</button>
		</view>
		<view class="box" @click="showtip">
			<view class="flex_col_ali">
				<view class="text_css">金豆余额</view>
				<u-gap height="20rpx"></u-gap>
				<view class="num_css">{{userInfo.balance||0}}</view>
			</view>
			<view class="flex_col_ali">
				<view class="text_css">邀请总人数</view>
				<u-gap height="20rpx"></u-gap>
				<view class="num_css">{{invite_num||0}}</view>
			</view>
			<view class="flex_col_ali">
				<view class="text_css">可领取奖励次数</view>
				<u-gap height="20rpx"></u-gap>
				<view class="num_css">{{surplus_times||0}}</view>
			</view>
		</view>

		<view class="but_css" v-if="surplus_times>0">
			<u-button @click="reward" type="warning" :text="'领取全部奖励（'+surplus_times +'*'+ beannumber+'）金豆'"
				shape="circle">
			</u-button>
		</view>

		<view class="bgcolor_padd" v-if="info.length>0">
			<view v-for="(item,index) in info" :key="index" style="margin: 20rpx;">
				<view style="display: flex;align-items: center;margin-bottom: 30rpx;">
					<image :src="item.avatar||'@/pages_sub/static/user.png'"
						style="width: 90rpx;height: 90rpx;border-radius: 50rpx;margin-right: 20rpx;"></image>
					<view>
						<view style="font-size: 28rpx;margin-bottom: 10rpx;">{{item.nickname||"匿名用户"}}</view>
						<view style="font-size: 24rpx;color: #888;">
							{{$u.timeFormat(item.register_date, 'yyyy/mm/dd hh:MM:ss')}}
						</view>
					</view>
				</view>
				<u-line></u-line>
			</view>
		</view>
		<view v-else>
			<u-empty mode="history" icon="http://cdn.uviewui.com/uview/empty/history.png" text="您还没有邀请好友哦">
			</u-empty>
		</view>

		<!-- <view>
			<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
				:direction="direction" @trigger="trigger" @fabClick="fabClick" />
		</view> -->


		<u-gap height="40rpx"></u-gap>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				beannumber: vk.vuex.get('$app.appinfo.beannumber'),
				userInfo: {
					balance: 0
				},
				surplus_times: 0, //剩余可领取次数
				invite_img: "https://duanju-1257028257.cos.ap-guangzhou.myqcloud.com/images/invite.jpg",
				invite_num: 0,
				info: [],
				//悬浮图标
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#f36c3a',
					buttonColor: '#f36c3a',
					iconColor: '#fff'
				},
				content: []
			}
		},
		onShow() {
			this.userlogin()
		},
		onShareAppMessage() {
			console.log("触发分享");
			//带上个人邀请码转发
			return {
				title: '', // 默认为小程序名称
				path: '/pages/index/index?invite_code=' + vk.vuex.get('$user.userInfo.my_invite_code'),
				imageUrl: '' // 默认为当前页面的截图
			}
		},
		methods: {
			trigger(e) {
				this.content[e.index].active = !e.item.active
				if (e.item.text == "活动规则") {
					this.showtip()
				}
				if (e.item.text == "联系客服") {
					uni.navigateTo({
						url: "/pages_sub/qrcode/qrcode"
					})
				}
				// uni.showModal({
				// 	title: '提示',
				// 	content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
				// 	success: function(res) {
				// 		if (res.confirm) {
				// 			console.log('用户点击确定')
				// 		} else if (res.cancel) {
				// 			console.log('用户点击取消')
				// 		}
				// 	}
				// })
			},
			fabClick() {
				// uni.showToast({
				// 	title: '点击了悬浮按钮',
				// 	icon: 'none'
				// })
			},

			async userlogin() {
				let that = this;
				//检查登录情况，没注册自动用openid注册，注册过的直接登录
				let uid = vk.vuex.get('$user.userInfo._id');
				//判断用户登录状态(token有效)
				if (uid && vk.checkToken()) {
					vk.userCenter.getCurrentUserInfo({
						success: (data) => {
							// 登陆成功后才能执行此云函数
							that.userInfo = data.userInfo;
							vk.callFunction({
								url: 'client/user/kh/my_invite_user',
								title: '查询中...',
								data: {},
								success: (data) => {
									// console.log("data=", data);
									that.invite_num = data.total
									that.info = data.userlist
									that.surplus_times = data.surplus_times

								}
							});
						}
					});
				} else {
					console.log("执行了自定义登录函数");
					await uni.vk.myfn.ttlogin();
				}
			},
			async reward() {
				vk.callFunction({
					url: 'client/user/kh/my_invite_user',
					title: '查询中...',
					data: {
						bean_number: vk.vuex.get('$app.appinfo.beannumber') * 1, //每邀请一个新用户奖励多少
						type: "reward"
					},
					success: (data) => {
						this.surplus_times = 0
						this.userInfo.balance = data.balance
					}
				});
			},
			showtip() {
				uni.showModal({
					title: "邀请规则说明：",
					content: "每邀请一个新用户，可奖励" + this.beannumber + "金豆。奖励不自动发放，需在当前页面领取",
					showCancel: false,
					confirmText: "我已知晓"
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #fafafa;
	}

	.box {
		display: flex;
		justify-content: space-evenly;
		box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.2), 0 6rpx 20rpx 0 rgba(0, 0, 0, 0);
		margin: 20rpx;
		padding: 20rpx;
		border-radius: 20rpx;
	}

	.text_css {
		color: #888;
		font-size: 28rpx;
	}

	.num_css {
		color: #f9ae3d;
		font-size: 30rpx;
	}

	.flex_col_ali {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.bgcolor_padd {
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		margin: 20rpx;
		padding: 20rpx;
		border-radius: 20rpx;
	}

	.but_css {
		margin: 20rpx;
	}
</style>
